﻿<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
    <script type="text/javascript" src="~/Scripts/vue.js"></script>
    <script type="text/javascript" src="~/Scripts/ElementUI/element-ui.js"></script>
    <link rel="stylesheet" href="~/Content/ElementUI/element-ui.css"/>
    <style type="text/css">
        * {
            margin:0;
            padding:0
        }
        #app {
            margin:0;padding:0
        }

        #top {
            background-color:white;
            width:100%;
            height:100px;
        }

        #main {
            border-top:1px red solid;
            overflow:hidden
        }

        #left {
            width:10%;
            float:left;
            overflow:hidden
        }

        #right {
            width:88%;
            margin-left:20px;
            margin-top:20px;
            float:left;
            overflow:hidden;
            text-align:left
        }

        #menu {
            min-height: 100%;
        }

            #menu a {
                text-decoration:none;
                color:black
            }

        .el-table td, .el-table th {
            padding:8px
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="top">top</div>
        <div id="main">
            <div id="left">    
                <el-menu default-active="2" id="menu">
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title">
                            <a href="/user/list">用户管理</a>
                        </span>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">
                                分组一
                            </template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="2-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="2-4">
                            <template slot="title">
                                选项4
                            </template>
                            <el-menu-item index="2-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="3">
                        <i class="el-icon-menu"></i>
                        <span slot="title">
                            <a href="/">首页</a>
                        </span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div id="right">@RenderBody()</div>
            <div style="clear:both"></div>
        </div>
    </div>
    @RenderSection("scripts", required: false)
    @RenderSection("css", required: false)
</body>
</html>
